import 'package:flutter/material.dart';
import 'package:x3_base_core/x3_base_core.dart';
import 'package:x3_component_core/components/dialog_components/base_customize_dropdown_select_dialog.dart';
import 'package:x3_component_core/components/dialog_components/base_customize_dropdown_multiple_select_dialog.dart';

///**
///* @fileName: base_customize_dropdown
///* @author: hrongyong
///* @date-time: 12/10/21 9:34 AM
///* @email: hrongyong@gmail.com
///* description: 基础自定义下拉菜单
///* <fileName> <author> <date-time> <email> <description>
///* 文件名 作者姓名 创建时间 作者邮箱 文件描述
///*/

class BaseCustomizeDropdown extends StatefulWidget {
  // 全部选项
  final List<BaseKeyValueModel> optionsList;

  // 默认选项
  final List<BaseKeyValueModel> defaultSelect;

  // 选中回调
  final Function(List<BaseKeyValueModel> selectModel) selectCallBack;

  // 组件高度
  final double componentHeight;

  // 组件宽度
  final double componentWidth;

  // AppBar到组件顶部的距离
  final double reservedHeight;

  // 是否多选
  final bool istMultiple;

  const BaseCustomizeDropdown({Key key, @required this.optionsList, @required this.selectCallBack, @required this.reservedHeight, @required this.defaultSelect, this.componentHeight = 48, this.componentWidth = double.infinity, this.istMultiple = false}) : super(key: key);

  @override
  _BaseCustomizeDropdownState createState() => _BaseCustomizeDropdownState();
}

class _BaseCustomizeDropdownState extends State<BaseCustomizeDropdown> {
  List<BaseKeyValueModel> _selectItem = [];

  @override
  void initState() {
    super.initState();
    if (widget.defaultSelect != null && widget.defaultSelect.length != 0) _selectItem = widget.defaultSelect;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: widget.componentHeight,
      width: widget.componentWidth,
      child: _buildButtonWidget(text: _onDropdownShowText(), onTap: widget.istMultiple ? _onMultipleSelectEvent : _onSelectEvent),
    );
  }

  Widget _buildButtonWidget({@required String text, @required Function() onTap, Key key}) {
    return InkWell(
      onTap: onTap,
      child: Container(
        alignment: Alignment.center,
        padding: EdgeInsets.symmetric(horizontal: 5),
        child: Row(
          key: key,
          mainAxisSize: MainAxisSize.min,
          children: [
            Flexible(child: Text(text, style: TextStyle(fontSize: 14, color: Colors.black54), maxLines: 1, overflow: TextOverflow.ellipsis)),
            SizedBox(width: 4),
            Icon(Icons.keyboard_arrow_down),
          ],
        ),
      ),
    );
  }

  String _onDropdownShowText() {
    if (_selectItem.length == 0) return widget.optionsList[0].value;
    if (_selectItem.length == 1) return this._selectItem[0].value;
    String _text = '';
    _selectItem.asMap().keys.forEach((index) {
      if (index == 0) _text += _selectItem[0].value;
      if (index != 0) _text += '/${_selectItem[index].value}';
    });
    return _text;
  }

  void _onSelectEvent() {
    showDialog(
        context: context,
        barrierColor: Colors.transparent,
        builder: (BuildContext context) {
          return BaseCustomizeDropdownSelectDialog(selectModel: this._selectItem.length == 0 ? widget.optionsList[0] : this._selectItem[0], optionsList: widget.optionsList, reservedHeight: widget.reservedHeight + widget.componentHeight, selectCallBack: _onBaseCustomizeDropdownSelectDialogEvent);
        });
  }

  void _onMultipleSelectEvent() {
    showDialog(
        context: context,
        barrierColor: Colors.transparent,
        builder: (BuildContext context) {
          return BaseCustomizeDropdownMultipleSelectDialog(optionsList: widget.optionsList, reservedHeight: widget.reservedHeight + widget.componentHeight, selectCallBack: _onBaseCustomizeDropdownMultipleSelectDialogEvent, selectedItem: this._selectItem);
        });
  }

  void _onBaseCustomizeDropdownSelectDialogEvent(BaseKeyValueModel selectModel, int selectIndex) {
    this._selectItem.clear();
    this._selectItem.add(selectModel);
    widget.selectCallBack([selectModel]);
    setState(() {});
  }

  void _onBaseCustomizeDropdownMultipleSelectDialogEvent(List<BaseKeyValueModel> selectModel) {
    this._selectItem.clear();
    this._selectItem.addAll(selectModel);
    widget.selectCallBack(selectModel);
    setState(() {});
  }
}
